import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import UserCenterVM from 'cvm/userCenter/userCenter'
import './userCenter.less'

const UserCenterList = observer(({ vm }) => {
  const item = vm.userValue
  return (
    <div className='user-center'>
      {
        item.PhoneNum &&
        <div>
          <div className='user-info flex-wrap'>
            <div className='flex-1'>
              <img src={require('../../images/header.png')} className='header' />
            </div>
            <div className='flex-3 user-phone' onClick={() => { vm.handerToChange(item.PhoneNum) }}>
              <p className='name'>{item.Name}</p>
              <p className='phone'>{item.PhoneNum}</p>
              <img className='right' src={require('../../images/right.png')} />
            </div>
          </div>
          <div className='flex-wrap money-container'>
            <div className='flex-1'>
              <p className='account-balance'>账户余额(元)</p>
              <p className='balance-count'>{item.Banlance.toFixed(2)}</p>
              <p className='balance-out'><span onClick={() => { vm.handerToWithdraw() }}>我要提现</span></p>
            </div>
            <div className='flex-1'>
              <p className='account-commission'>佣金总额(元)</p>
              <p className='commission-count'>{item.Commission.toFixed(2)}</p>
              <p className='check-commission'><span onClick={() => { vm.handerToCommission() }}>查看佣金</span></p>
            </div>
          </div>
          <div className='flex-wrap sale-container' onClick={() => { vm.handleToSaleNecessary() }}>
            <div className='flex-1 logo-box'>
              <img src={require('../../images/center-1.png')} className='logo' />
            </div>
            <div className='flex-4'>
              <p className='text-style'>销售必备<img src={require('../../images/right.png')} /></p>
            </div>
          </div>
          <div className='flex-wrap sale-container margin-bottom' onClick={() => { vm.handleMarketingStrategy() }}>
            <div className='flex-1 logo-box'>
              <img src={require('../../images/center-2.png')} className='logo' />
            </div>
            <div className='flex-4'>
              <p className='text-style'>营销攻略<img src={require('../../images/right.png')} /></p>
            </div>
          </div>
          <div className='flex-wrap sale-container' onClick={() => { vm.handleToAccuseRecord() }}>
            <div className='flex-1 logo-box'>
              <img src={require('../../images/opinion.png')} className='logo' />
            </div>
            <div className='flex-4'>
              <p className='text-style'>投诉记录<img src={require('../../images/right.png')} /></p>
            </div>
          </div>
          <div className='flex-wrap sale-container margin-bottom' onClick={() => { vm.handleToAdvise() }}>
            <div className='flex-1 logo-box'>
              <img src={require('../../images/record.png')} className='logo' />
            </div>
            <div className='flex-4'>
              <p className='text-style'>意见反馈<img src={require('../../images/right.png')} /></p>
            </div>
          </div>
        </div>
      }
    </div>
  )
})

@observer
class userCenter extends Component {
  constructor (props) {
    super(props)
    window.document.title = '个人中心'
    this.vm = new UserCenterVM(props)
  }
  render () {
    return (
      <div>
        <UserCenterList vm={this.vm} />
      </div>
    )
  }
}

export default userCenter
